<template>
	<div class="ToLogin">
		<div class="head_two"><i class="iconfont icon-Goback" @click="$router.back(-1)"></i></div>
		<div class="login_cont">
			<p class="title">帐号登陆</p>
			<ul class="logUl">
				<li><input type="text" name="" placeholder="手机号、邮箱" v-model="myphone"></li>
				<li><input type="password" name="" placeholder="输入登录密码" v-model="mypawds"></li>
			</ul>
			<button class="button " :class="{backg:isShow}" @click="OnceLogin()">登录</button>
			<span>{{filterPhone}}</span>
			<p class="othe_a">
				<a href="/LoginAll/ToPhone/2">快速注册</a>
				<a href="/LoginAll/ToPhone/3">忘记登录密码</a>
			</p>
			<div class="othe_login">
				<p class="hengxian"><i></i><span>快速登录</span></p>
				<li>
					<a href="/LoginAll/ToPhone/4">
						<i><img alt="加载失败" src="../../assets/Login/login_phone.png"></i>
						<span>短信登录</span>
					</a>
				</li>
				<li>
					<i><img alt="加载失败" src="../../assets/Login/login_WeChat.png"></i>
					<span>微信登录</span>
				</li> 
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	import Qs from 'qs';
	import md5 from 'js-md5';
	export default {
		name: 'ToLogin',
		data() {
			return {
				myphone: '',
				mypawds: '',
				isShow: false
			}
		},
		beforeCreate() {
			this.$router.push({
				path: '/cardoilAll'
			});
		},
		created: function() {
			this.urls = this.$store.state.urls;
			this.MembersID = this.$store.state.MembersID;
			this.Type = this.$store.state.Type;
		},
		computed: {
			filterPhone: function() {
				if(this.myphone.length > 10) {
					this.isShow = true
				} else {
					this.isShow = false
				}
			}
		},
		mounted: function() {
			this.Estimate();
		},
		methods: {
			//点击登录
			OnceLogin: function() {
				if(this.isShow == true) {
					if(/^1\d{10}$/.test(this.myphone)) {
						Indicator.open({
							spinnerType: 'snake'
						});
						this.$http.post(this.urls + "/WorkMembers/v1.0/AccountLogin", Qs.stringify({
							"Account": this.myphone,
							"Pwd": md5(this.mypawds)
						})).then((res) => {
							console.log(res.data);
							if(res.data.Return_Data == "") {
								Toast(res.data.Return_Mess)
								Indicator.close();
								this.$router.push({
									path: '/loginAll'
								})
							} else {
								sessionStorage.MembersID = res.data.Return_Data;
								console.log(sessionStorage.getItem("MembersID"));
								//如果是注册登录了，跳转第一页
								this.$store.state.MembersID = res.data.Return_Data;
								Indicator.close();
								this.$router.push({
									path: '/cardoilAll'
								});
							}

						}).catch((err) => {
							console.log(err);
						});

					} else {
						Toast("请输入正确手机号~")
					}
				} else {
					Toast("不能为空哟~")
				}
			},
			//sessionStorage
			Estimate: function() {
				if(!sessionStorage.getItem("MembersID") || sessionStorage.getItem("MembersID") == 'undefined') {
					console.log(this.MembersID);
					this.$router.push({
						path: '/loginAll'
					}) //进来判断是否已经有账号
				} else {
					//如果有进入下一个页面
					this.$router.push({
						path: '/cardoilAll'
					})
				}
			}
		}
	}
</script>
<style scoped>
	.logUl {
		width: 100%;
	}
	
	.logUl li {
		border-bottom: 1px solid #e8e8e8;
		height: 1.28rem;
	}
	
	.logUl li input {
		width: 100%;
		height: 100%;
		border: 0;
		outline: none;
		text-indent: 0.3333333333rem;
		font-size: 0.4rem;
	}
	
	.button {
		width: 100%;
		outline: none;
		height: 1.0666666667rem;
		color: #fff;
		font-size: 0.4533333333rem;
		background-color: #ccc;
		border: 0;
		border-radius: 0.0666666667rem;
		margin: 0.6666666667rem 0;
	}
	
	.backg {
		background-color: #db2023;
	}
	
	.othe_login {
		width: 100%;
	}
	
	.othe_login .hengxian {
		width: 100%;
		position: relative;
		font-size: 0.32rem;
		color: #c6c6c6;
		text-align: center;
		margin-bottom: 0.6rem;
	}
	
	.othe_a {
		font-size: 0.3466666667rem;
		margin-bottom: 3.0666666667rem;
		color: #4f60ff !important;
	}
	
	.othe_a a {
		text-decoration: underline;
	}
	
	.othe_a a:nth-child(2) {
		float: right;
	}
	
	.othe_login {
		text-align: center;
	}
	
	.othe_login p i {
		display: block;
		width: 100%;
		border-bottom: 1px solid #ccc;
	}
	
	.othe_login p span {
		padding: 0 0.2666666667rem;
		background-color: #fff;
		z-index: 10;
		position: absolute;
		left: 40%;
		top: -0.2rem;
	}
	
	.othe_login li {
		display: inline-block;
		margin: 0.5733333333rem;
	}
	
	.othe_login li a {
		display: inline-block;
	}
	
	.othe_login li i {
		display: block;
		width: 1.2rem;
		height: 1.2rem;
	}
	
	.othe_login li i img {
		width: 100%;
	}
	
	.othe_login li span {
		display: block;
		color: #bbbbbb;
		font-size: 0.2933333333rem;
		line-height: 0.6rem;
	}
	
	a {
		color: #4f60ff !important;
	}
</style>